<template>
	<view class="modalBox" v-show="visible" @click.self="handleClose">
		<view class="cu-dialog" @tap.stop style="background: none;overflow: visible;">
			<!-- <slot name="modalContent">
				
			</slot> -->
			<view style="background: #EEEEEE;z-index: 1000;padding: 10px 20px;border: 1px solid #C0C4CC;border-radius: 8px;">
				<view style="text-align: center;height: 40px;line-height: 40px;position: relative;">
					售出确认单
					<span @tap="handleClose" style="position: absolute;right: -15px;top: -5px;height: 14px;line-height: 14px;font-size: 14px;">X</span>
				</view>
				<view class="content">
					<view class="perItem">
						<span>品种：</span>
						<span>东魁杨梅</span>
					</view>
					<view class="perItem">
						<span>预计成熟期：</span>
						<span>2021/06/30</span>
					</view>
					<view class="perItem">
						<span>收购价：</span>
						<span>15元/kg</span>
					</view>
					<view class="perItem">
						<span>售出数量</span>
						<span style="border-radius: 6px;border: 1px solid #C0C4CC;">
							<input placeholder="kg" style="display: inline-block;"/>
						</span>
						
					</view>
					<view>
						<p>
							备注信息
						</p>
						<p style="border-radius: 6px;border: 1px solid #C0C4CC;padding: 4px;margin-top: 2px;">
							<textarea placeholder="请输入备注信息"></textarea>
						</p>
						
					</view>
					<view style="text-align: center;margin-top: 5px;">
						<span @tap="handleClose" style="width: 25px;height: 25px;line-height: 25px;border-radius: 8px;background: #606266;padding: 2px 8px;color: #ffffff;">确认提交</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'shoproModal',
	components: {},
	data() {
		return {};
	},
	props: {
		visible:{
			type:Boolean,
			default:false
		}
	},
	methods: {
		handleClose(){
			this.$emit('update:visible', false)
		}
	}
};
</script>

<style >
	.modalBox{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(153,153,153, 0.6);
		z-index: 999;
		padding-top: 20%;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	.content .perItem{
		height: 35px;
		line-height: 35px;
	}
</style>
